<template>
  <div class="register">
    <el-form ref="registerRef" :model="registerForm" :rules="registerRules" class="register-form">
      <h3 class="title">商家注册</h3>
      <el-form-item prop="merName" style="width: 100%;">
        <el-input v-model="registerForm.merName" placeholder="请输入公司名称"></el-input>
      </el-form-item>
      <el-form-item prop="leaderName">
        <el-select v-model="registerForm.leaderName" placeholder="请选择企业性质">
          <el-option :value="0">企业</el-option>
          <el-option :value="1">个体工商户</el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="provinceArray">
        <AreaOptions ref="AreaOptions1" :modelValue="registerForm.provinceArray" :isHasDis="1" :level="1"
                     @change="handleChangeProvince" @expand-change="handleExpandChange" :placeholder="'请选择所属地区'"></AreaOptions>
      </el-form-item>
      <el-form-item prop="leaderName">
        <el-input v-model="registerForm.leaderName" placeholder="请输入联系人姓名"></el-input>
      </el-form-item>
      <el-form-item prop="telephone">
        <el-input v-model="registerForm.telephone" placeholder="请输入联系方式"></el-input>
      </el-form-item>

      <el-form-item style="width: 100%">
        <el-button :loading="loading" size="large" type="primary" style="width: 100%" @click.prevent="submitForm">
          <span v-if="!loading">注 册</span>
          <span v-else>注 册 中...</span>
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import {MerForm} from "@/api/shopping/mer/types";
import {addMer} from "@/api/shopping/mer";

//注意是useRoute
const route = useRoute();

const registerForm = ref<MerForm>({
  id: undefined,
  organId: undefined,
  merName: undefined,
  merNo: undefined,
  merLogo: undefined,
  shopType: undefined,
  state: undefined,
  cateId: undefined,
  cateChildId: undefined,
  longitude: undefined,
  latitude: undefined,
  provId: undefined,
  cityId: undefined,
  districtId: undefined,
  provName: undefined,
  cityName: undefined,
  districtName: undefined,
  address: undefined,
  leaderName: undefined,
  telephone: undefined,
  email: undefined,
  createTime: undefined,
  serviceStar: undefined,
  keyWord: undefined,
  introduce: undefined,
  creditCode: undefined,
  codeImg: undefined,
  idCardImgBefore: undefined,
  idCardImgAfter: undefined,
  checkState: undefined,
  checkResult: undefined,
  heTongPic: undefined,
  signImg: undefined,
  qrCode: undefined,
  bankName: undefined,
  bankCardNo: undefined,
  bankRealName: undefined,
  agId: undefined,
  promoterId: undefined,
  payPlatform: undefined,
  payPlatformId: undefined,
  points: undefined,
  merLogoPath: undefined,
  provinceArray: [],
  organNo: undefined,
});


const registerRules: ElFormRules = {
  merMae: [
    { required: true, trigger: 'blur', message: '请输入公司名称' },
  ],
};

const buttonLoading = ref(false);
const loading = ref(false);
const registerRef = ref<ElFormInstance>();


/** 提交按钮 */
const submitForm = () => {
  registerRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      buttonLoading.value = true;
      await addMer(registerForm.value).finally(() =>  buttonLoading.value = false);
      proxy?.$modal.msgSuccess("操作成功");
    }
  });
}

const handleChangeProvince = (e) => {
  console.log('handleChangeProvince',e);
  registerForm.value.provinceArray = e;
};

// TODO：各父级选项值组成的数组
const handleExpandChange = (e) => {
  console.log(e);
};

onMounted(() => {
  console.log('接收参数 ', route.query); //输出的即为接收到的参数
  if (route.query.no != undefined) {
    registerForm.value.organNo = route.query.no as string;
  }
});
</script>

<style lang="scss" scoped>
.register {
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  background-size: cover;
}

.title {
  margin: 0 auto 30px auto;
  text-align: center;
  color: #707070;
}

.register-form {
  border-radius: 6px;
  background: #ffffff;
  padding: 25px 25px 5px 25px;

  .el-input {
    height: 40px;

    input {
      height: 40px;
    }
  }

  .input-icon {
    height: 39px;
    width: 14px;
    margin-left: 0;
  }
}

.register-tip {
  font-size: 13px;
  text-align: center;
  color: #bfbfbf;
}

.register-code {
  width: 33%;
  height: 40px;
  float: right;

  img {
    cursor: pointer;
    vertical-align: middle;
  }
}

.el-register-footer {
  height: 40px;
  line-height: 40px;
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
  color: #fff;
  font-family: Arial, serif;
  font-size: 12px;
  letter-spacing: 1px;
}

.register-code-img {
  height: 40px;
  padding-left: 12px;
}
</style>
